<template>
  <div id="regulations-contrast-list">
    <el-table
      :data="regulationsContrastList"
      style="width: 100%"
      height="100%"
      :cell-style="cellStyle"
    >
      <el-table-column label="标题" width="410px">
        <template slot-scope="scope">
          <P @click="toLawDetail(scope.row.id)" class="law-title" v-hightlight:[scope.row.title]="highlightKeywords"></P>
        </template>
      </el-table-column>
      <el-table-column label="发布部门">
        <template slot-scope="scope">{{scope.row.org || '--'}}</template>
      </el-table-column>
      <el-table-column label="发文字号">
        <template slot-scope="scope">{{scope.row.file_order|| '--'}}</template>
      </el-table-column>
      <el-table-column label="时效性">
        <template slot-scope="scope">{{scope.row.law_status === 1 ? '有效' : '无效'}}</template>
      </el-table-column>
      <el-table-column label="发布日期">
        <template slot-scope="scope">{{scope.row.publish_date|| '--'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{ $index, row }">
          <el-button size="mini" type="primary" @click="clickComparisonBtn($index,row)" class="btn">
<!--            <img src="../../../../static/regulations-contrast/regulations-contrast-btn-icon.png" alt="">-->
            <span>法规对比</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <comparison-dialog ref="comparison"></comparison-dialog>
  </div>
</template>

<script>
import ComparisonDialog from '../components/dialog'
export default {
  name: '',
  components: {
    ComparisonDialog
  },
  filters: {},
  props: {
    regulationsContrastList: {
      type: Array
    },
    highlightKeywords: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  activated () {},
  beforeDestroy () {},
  methods: {
    // tableHeader ({ row, column, rowIndex, columnIndex }) {
    //   return 'color:#000000;font-weight:600;background:rgba(250,250,250,1)'
    // },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      return columnIndex === 0 ? 'color:#3080FE' : 'color:#000000'
    },
    toLawDetail (id) {
      this.$router.push({
        name: 'law-detail', params: { id }
      })
    },
    clickComparisonBtn (index, row) {
      row.checked = true
      sessionStorage.setItem('setDeafultCheckLaw', JSON.stringify(row))
      this.$refs.comparison.showDialog()
    }
  }
}
</script>

<style lang="scss" scoped>

#regulations-contrast-list{
  // padding: 15px;
  // box-sizing: border-box;
  height: 100%;
  .law-title{
    cursor: pointer;
  }
  .law-title:hover{
    text-decoration: underline;
  }
  .btn{
    width:100%;
    height:32px;
    background:$primary-color;
    border-radius:4px;
    font-size: $fs-s;
    img{
      margin-right: 5px;
      vertical-align: middle;
    }
    span{
      vertical-align: middle;
    }
  }
}
</style>
